<template>
  <div id="main">
    <el-form ref="addform" :model="addform" :rules="fromrules">
      <el-form-item label="数据源" label-width="120px" prop="datasourceId">
        <el-select filterable style="width: 90%" size="mini" v-model="addform.datasourceId"
                   placeholder="请选择数据源">
          <el-option
            v-for="item in dataSourceOptions"
            :key="item.id"
            :label="item.datasourceName"
            :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="sql语句" label-width="120px" prop="sqlText">
        <el-input style="width: 82.5%" type="textarea" :rows="10" placeholder="" size="mini" v-model="addform.sqlText "
                  autocomplete="off"></el-input>
        <el-button type="primary" style="margin-left: 10px" size="mini" @click="getField('tag')">获取字段</el-button>
      </el-form-item>
      <el-form-item label="集合变量名" label-width="120px">
        <el-input style="width: 90%" placeholder="" size="mini" v-model="addform.dataAlias "
                  autocomplete="off"></el-input>
      </el-form-item>
    </el-form>
    <el-form :rules="fromrules" class="requiredFrom" :model="formdata" ref="ruleForm">
    <el-table
      :data="formdata.tableData"
      size="small"
      style="width: 100%">
      <el-table-column align="center" label="筛选条件">
        <el-table-column align="center" label="字段">
          <template slot-scope="scope">
            <el-form-item>
              <el-select filterable style="width: 100%" clearable  size="mini" v-model="scope.row.srcColumnName"
                         placeholder="请选择字段">
                <el-option
                  v-for="item in fieldOption"
                  :key="item.name"
                  :label="item.name"
                  :value="item.name">
                </el-option>
              </el-select>
            </el-form-item>

          </template>
        </el-table-column>
        <el-table-column align="center" label="关系">
          <template slot-scope="scope">
            <el-form-item>
              <el-select filterable style="width: 100%" clearable size="mini" v-model="scope.row.relation"
                         placeholder="请选择关系">
                <el-option
                  v-for="item in relationOptions"
                  :key="item.value"
                  :label="item.value"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column align="center" label="值">
          <template slot-scope="scope">
            <el-form-item>
            <el-input v-model="scope.row.srcColumnValue" size="mini"></el-input>
            </el-form-item>
          </template>
        </el-table-column>
      </el-table-column>
      <el-table-column align="center" label="">
        <el-table-column align="center" label="取值字段">
          <template slot-scope="scope">
            <el-form-item
              :prop="'tableData.' + scope.$index + '.valColumn'"
              :rules="fromrules.valColumn">
            <el-select filterable style="width: 100%" size="mini" clearable v-model="scope.row.valColumn"
                       placeholder="请选择字段">
              <el-option
                v-for="item in fieldOption"
                :key="item.name"
                :label="item.name"
                :value="item.name">
              </el-option>
            </el-select>
            </el-form-item>
<!--            <el-input v-model="scope.row.valColumn" size="mini"></el-input>-->
          </template>
        </el-table-column>
        <el-table-column align="center" label="集合变量名">
          <template slot-scope="scope">
            <el-form-item
              :prop="'tableData.' + scope.$index + '.valName'"
              :rules="fromrules.valName">
            <el-input v-model="scope.row.valName" size="mini"></el-input>
            </el-form-item>
          </template>
        </el-table-column>
      </el-table-column>

      <el-table-column align="center">
        <template slot="header" slot-scope="scope">
          <el-button type="primary" style="margin-left: 10px" size="mini" @click="addHang()">增加
          </el-button>
        </template>
        <template slot-scope="scope">
          <el-button type="danger" style="margin-left: 10px" size="mini" @click="deleteRow(scope.$index)">删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    </el-form>
  </div>
</template>
<script>
import { codemirror } from "vue-codemirror";
import "codemirror/lib/codemirror.css"; // 基本样式
import "codemirror/theme/ambiance.css"; // 主题1 这里引入的是主题样式，根据设置的theme的主题引入，一定要引入！！
import "codemirror/theme/base16-light.css"; // 主题2
import "codemirror/theme/cobalt.css"; // 主题3
import "codemirror/mode/sql/sql.js";
import Crontab from "@/views/taskscheduler/components/crontab/index.vue";
//禁止缩放
export default {

  data() {
    return {
      formdata:{
        tableData: [{
          srcColumnName: "",
          relation: "",
          srcColumnValue: "",
          valName: "",
          valColumn: ""
        }],
      },

      dataSourceOptions: [],
      fieldOption: [],
      relationOptions: [
        {
          value: ">"
        },
        {
          value: ">="
        },
        {
          value: "="
        },
        {
          value: "!="
        },
        {
          value: "<"
        },
        {
          value: "<="
        }

      ],
      addform: {
        datasourceId: "",
        sqlText: "",
        dataAlias: ""
      },
      fromrules: {
        datasourceId: { required: true, message: "请选择", trigger: "change" },
        sqlText: { required: true, message: "请输入", trigger: "blur,change" },
        srcColumnName: {required: true, message: "请选择字段", trigger: ["blur", "change"] },
        valColumn: {required: true, message: "请选择字段", trigger: ["blur", "change"] },
        valName: {required: true, message: "请输入变量名", trigger: ["blur", "change"] },
      }
    };
  },
  methods: {
    getdata() {
      // console.log("data", this.form);
    },
    getField(tag) {
      this.$refs.addform.validate((valid) => {
        if (valid) {
          let querydata = {
            datasourceId: this.addform.datasourceId.toString(),
            sqlText: this.addform.sqlText
          };
          return this.$http.post("/fetchData/findColumns", querydata).then((res) => {
            if (tag) {
              this.$message.success("获取字段成功");
            }
            this.fieldOption = res.data;
          });
        }
      });
    },
    getFormOption() {
      return this.$http.post("/offlineSync/findDatasource").then((res) => {
        this.dataSourceOptions = res.data;
      });
    },
    invertData(data) {
      if (!data) {
        this.restForm();
        return;
      }
      Promise.all([this.getFormOption()]).then((res) => {
        this.$nextTick(() => {
          if (data) {
            this.addform = data;
            this.addform.datasourceId = Number(data.datasourceId);
            this.formdata.tableData = data.columnList;
          }
        });
        let querydata = {
          datasourceId: data.datasourceId.toString(),
          sqlText: data.sqlText
        };
        return this.$http.post("/fetchData/findColumns", querydata).then((res) => {
          this.fieldOption = res.data;
        });
      });
    },
    addHang() {
      this.formdata.tableData.push({ id: "" });
    },
    deleteRow(index, rows) {
      this.formdata.tableData.splice(index, 1);
    },
    renderHeader(h, { column, $index }) {
      const attrs = {
        props: {
          clickChangeColor: true,
          type: "primary",
          underline: true
        }
      };
      return h("el-link", attrs, column.label);
    },
    restForm() {
      this.addform = {
        datasourceId: "",
        sqlText: "",
        dataAlias: ""
      };
      // console.log(this.addform);
      this.formdata.tableData = [{
        srcColumnName: "",
        relation: "",
        srcColumnValue: "",
        columnAlias: "",
        valColumn: ""
      }];
    }

  },
  mounted() {
    this.getFormOption();
  }
};
</script>
<style lang="scss" scoped>
::v-deep.code-mirror {
  .CodeMirror-line {
    font-size: 16px;
  }

  .CodeMirror-linenumber {
    font-size: 16px;
  }

  .cm-s-cobalt.CodeMirror {
    background-color: black;
  }
}
</style>
